<template>
<div :class="cssLink?'h5':'web'" style="height: 100%">
    <div class="hello-page">
        <div class="top-box">
            <img class="top-log" src="../../../assets/wzz_image/wzzlog.png" />
            <div class="top-title">质量管理板块可视化看板-生产二部</div>
            <div class="top-time">{{ currentTime }}</div>
        </div>
        <div class="echart-contnt">
            <div class="echart-list">
                <div class="state-box echart-box">
                    <div class="echart-total" v-for="(item,index) in echartTotal" :key="index">
                        <div class="echart-text">{{ item.name }}</div>
                        <div class="echart-num">
                            <div>{{ item.value }}</div>
                            <span>片</span>
                        </div>
                    </div>
                </div>
                <div class="echart-box" style="padding-top:30px;">
                    <div class="progress-list">
                        <div class="progress-title">4月报废量环比变动</div>
                        <div class="histogram-box">
                            <div style="flex: 1;"><histogram :valueData="10"></histogram></div>
                            <div class="progress-num">1147斤</div>
                            <div class="progress-num">-10%</div>
                        </div>
                    </div>
                    <div class="progress-list">
                        <div class="progress-title">4月返工量环比变动</div>
                        <div class="histogram-box">
                            <div style="flex: 1;"><histogram :valueData="10"></histogram></div>
                            <div class="progress-num">1147斤</div>
                            <div class="progress-num">-10%</div>
                        </div>
                    </div>
                    <div class="progress-list">
                        <div class="progress-title">4月总产量环比变动</div>
                        <div class="histogram-box">
                            <div style="flex: 1;"><histogram :valueData="10"></histogram></div>
                            <div class="progress-num">1147斤</div>
                            <div class="progress-num">-10%</div>
                        </div>
                    </div>
                </div>
                <div class="echart-box" style="height:40vh;">
                    <linearColumnar text="生产二部分品相报废情况（斤）" :legendData="legendData1"></linearColumnar>
                </div>
            </div>
            <div class="echart-list">
                <div class="echart-box" style="height: 43vh;">
                    <brokenLine text="生产二部直通率"></brokenLine>
                </div>
                <div class="echart-box" style="height: 43vh;">
                    <stackedColumns text="生产二部整体报废(报废率，报废量/斤)"></stackedColumns>
                </div>
            </div>
            <div class="echart-list">
                <div class="state-box echart-box">
                    <div class="echart-total">
                        <div class="echart-text">原果不良</div>
                        <div class="echart-num">
                            <div>24,643</div>
                            <span>斤</span>
                        </div>
                    </div>
                    <div class="echart-total">
                        <div class="echart-text">制程不良</div>
                        <div class="echart-num">
                            <div>7,100</div>
                            <span>斤</span>
                        </div>
                    </div>
                    <div class="echart-total">
                        <div class="echart-text">整体直通率</div>
                        <div class="echart-num">
                            <div>96.38</div>
                            <span>%</span>
                        </div>
                    </div>
                </div>
                <div class="echart-box" style="padding-top:30px;">
                    <div class="progress-list">
                        <div class="progress-title">4月原果不良环比变动</div>
                        <div class="histogram-box">
                            <div style="flex: 1;"><histogram :valueData="10"></histogram></div>
                            <div class="progress-num">1147斤</div>
                            <div class="progress-num">-10%</div>
                        </div>
                    </div>
                    <div class="progress-list">
                        <div class="progress-title">4月制程不良环比变动</div>
                        <div class="histogram-box">
                            <div style="flex: 1;"><histogram :valueData="10"></histogram></div>
                            <div class="progress-num">1147斤</div>
                            <div class="progress-num">-10%</div>
                        </div>
                    </div>
                    <div class="progress-list" style="opacity: 0;">
                        <div class="progress-title">4月报废量环比变动</div>
                        <div class="histogram-box">
                            <div style="flex: 1;"><histogram :valueData="10"></histogram></div>
                            <div class="progress-num">1147斤</div>
                            <div class="progress-num">-10%</div>
                        </div>
                    </div>
                </div>
                <div class="echart-box" style="height: 40vh;">
                    <linearColumnar text="生产二部返工情况（斤）" :legendData="legendData2"></linearColumnar>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script setup>
  import histogram from '../../components/histogram'
  import echartsPie from '../../components/echartsPie'
  import progressLoop2 from '../../components/progressLoop2'
  import foldLine from '../../components/foldLine'
  import brokenLine from '../../components/brokenLine'
  import linearColumnar from '../../components/linearColumnar'
  import stackedColumns from '../../components/stackedColumns'
  let legendData1=ref(['3月报废量', '四月报废量', '三月报废率', '四月报废率'])
  let legendData2=ref(['3月返工量', '四月返工量', '三月返工率', '四月返工率'])
    // 每日计划产量达成实时情况
    let dateValue=ref('')
    // 设备实时运行状态
    let echartsPieData=ref([
        {name:'运行机台',value:100,title:'运行机台'},
        {name:'未运行机台',value:200,title:'未运行机台'}
    ])
    // 机器运行效率（罐）
    let color3=reactive([
        {offset: 0,color: "rgba(45, 182, 251, 1)"},
        {offset: 1,color: "rgba(12, 61, 114, .8)"}
    ])
    let color4=reactive([
        {offset: 0,color: "rgba(244, 82, 75, 1)"},
        {offset: 1,color: "rgba(18, 15, 37, 1)"}
    ])
    let dateData=reactive(['J01灭菌罐','J02灭菌罐','J03灭菌罐','J04灭菌罐','J05灭菌罐','J06灭菌罐','J07灭菌罐','J08灭菌罐','J08灭菌罐','J10灭菌罐'])
    let electricList2=reactive([1430,120,110,1430,110,1430,1110])
    // 状态
    let echartTotal=ref([
        {name:"报废量",value:100},
        {name:"返工量",value:2222},
        {name:"总产量",value:1111}
    ])
    // 机器产能利用率
    let lineChartForm=ref({
        nameData:['J01灭菌罐','J02灭菌罐','J03灭菌罐','J04灭菌罐','J05灭菌罐','J06灭菌罐','J07灭菌罐','J08灭菌罐','J08灭菌罐','J10灭菌罐'],
        valueData1:['41942','18009','45480','45795','45390','41942','18009','45480','45795','45390'],
        valueData2:['4242','18009','454480','45795','45590','41942','18079','45880','45795','65390'],
        name1:'2024年1月',
        name2:'2024年2月'
    })
    // 生产一部工序日产量（罐）
    let yieldData=reactive(['01泡籽上料','01泡籽下料','02灭菌','03发制上料','03发制下料','03烤料','J07灭菌罐','J08灭菌罐','J08灭菌罐','J10灭菌罐'])
    let yieldList=reactive([1430,120,110,1430,110,1430,1110])
    // 设备实时运行状态
    let echartsPieData2=ref([
        {name:'GQ100精条',value:100},
        {name:'GQ100鼓大条',value:200},
        {name:'GQ30精条',value:200},
        {name:'GQ50精条',value:200},
    ])
    const cssLink = ref(false);
    onMounted(() => {
      cssLink.value = window.innerWidth<1300?true:false;
    })
</script>
<style scoped lang="scss">
.web{
    .top-title {
      font-size: 32px;
      color: #399bff;
      font-weight: bold;
      left: 50%; /* 根据需要调整位置 */
      transform: translateX(-50%);
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .progress-num{
        font-size: 16px;
        margin-left:20px;
        white-space: nowrap;
    }
    .progress-list{
        margin-bottom: 30px;
    }
    .progress-title{
        font-size: 20px;
        margin-bottom:10px;
    }
    .histogram-box{
        display: flex;
        align-items: center;
    }
    .echart-box-total{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .state-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0;
        .state-list{
            margin-left: 30px;
            text-align: center;
            .state-name{    
                font-size: 14px;
                margin-bottom: 5px;
            }
            .state-state{
                display: inline-block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: red;
            }
        }

    }
    .echart-total{
        margin-left: 30px;
        .echart-text{
            text-align: center;
            font-size:18px;
        }
        .echart-num{
            display: flex;
            align-items:baseline;
            div{
                font-size: 30px;
                color: #db203e;
            }
            text{
                font-size: 16px;
                color: #fff;
            }
            
        }
    }
}
.h5{
    .top-title {
      font-size: .32rem;
      color: #399bff;
      font-weight: bold;
      left: 50%; /* 根据需要调整位置 */
      transform: translateX(-50%);
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .progress-num{
        font-size: .16rem;
        margin-left:.2rem;
        white-space: nowrap;
    }
    .progress-list{
        margin-bottom: .3rem;
    }
    .progress-title{
        font-size: .2rem;
        margin-bottom:.1rem;
    }
    .histogram-box{
        display: flex;
        align-items: center;
    }
    .echart-box-total{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .2rem;
    }
    .state-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .2rem 0;
        .state-list{
            margin-left: .3rem;
            text-align: center;
            .state-name{    
                font-size: .14rem;
                margin-bottom: .05;
            }
            .state-state{
                display: inline-block;
                width: .14rem;
                height: .14rem;
                border-radius: 50%;
                background-color: red;
            }
        }

    }
    .echart-total{
        margin-left: .3rem;
        .echart-text{
            text-align: center;
            font-size:.18rem;
        }
        .echart-num{
            display: flex;
            align-items:baseline;
            div{
                font-size: .3rem;
                color: #db203e;
            }
            text{
                font-size: .16rem;
                color: #fff;
            }
            
        }
    }
}
::v-deep .el-input__inner{
    color: #fff;
}
.echart-contnt{
    display: flex;
    justify-content: space-between;
    padding: 0 1%;
    .echart-list{
        &:nth-child(1){
            width: 30%;
        }
        &:nth-child(2){
            width: 40%;
            margin:0 1%;
        }
        &:nth-child(3){
            width: 30%;
        }
    }
}
.echart-box{
    background-color: rgba(14, 42, 67, 0.6);
    margin-bottom: 1vh;
    padding: 1vh;
}

.el-select {
  width: 80px;
}
::v-deep .el-input__wrapper {
  background-color: #0e2a43 !important;
}
// .el-input {
// background-color: #0e2a43 !important;
// }
.select-box { 
  width: 100%;
  // height: 10%;
  display: flex;
}
.hello-page {
  color: #fff;
  margin: 0;
  padding: 0;
  background: url("../../../assets/wzz_image/bg.jpg") no-repeat;
  background-size: cover; /* 让背景图片等比例拉伸或缩小以填满容器 */
  box-sizing: border-box;
  width: 100%; /* 设置宽度为父容器的100% */
  height: 100%; /* 设置高度为父容器的100% */
  .top-box {
    width: 100%;
    height: 10vh;
    background: url("../../../assets/wzz_image/head_bg.png") no-repeat;
    background-size: cover; /* 让背景图片等比例拉伸或缩小以填满容器 */
    box-sizing: border-box;
    display: flex;
    position: relative;
    .top-log {
      height: 6vh;
    }
    .top-title,
    .top-time {
      position: absolute;
      bottom: 36%; /* 64% 的高度中减去64%得到 36%，再向上移动64%的64%，即36% * 0.64 = 3.6% */
    }

    .top-title {
      font-size: 32px;
      color: #399bff;
      font-weight: bold;
      left: 50%; /* 根据需要调整位置 */
      transform: translateX(-50%);
    }

    .top-time {
      // font-weight: bold;
      font-size: 20px;
      right: 0; /* 根据需要调整位置 */
      font-family: "MyCustomFont", sans-serif; /* 使用自定义字体 */
    }
  }
}
</style>